<template>
	<div class="relative bg-bg-6 z-10" v-if="usdtInfo.address">
		<!--		<wallet-header-->
		<!--			:type="WalletType.usdt.id"-->
		<!--			:subtitle="walletStore.depositData.cryptoCode"-->
		<!--			:is-link="false" />-->
		<div id="mycanvas" ref="mycanvas" class="absolute -z-10">
			<div
				class="flex flex-col justify-center items-center px-[40px] pt-[40px] pb-[26px] overflow-hidden"
				style="background: linear-gradient(180deg, #7864ff 0%, #491cab 100%)">
				<div class="w-[316px] h-[288px] rounded-lg overflow-hidden bg-[#1e2c37]">
					<div class="text-t-1 text-center mt-[24px] mb-[16px] mx-auto">
						<span>{{ $t('TransactionType.deposit') }}</span>
						<span class="app-font-bold">- USDT</span>
						<span class="text-[var(--color-primary)]">
							({{ walletStore.depositData.cryptoCode }})
						</span>
					</div>
					<div
						class="flex justify-center items-center text-center w-[200px] aspect-square overflow-hidden m-auto bg-bg-3 rounded-lg">
						<n-qr-code
							id="qr-code"
							:value="usdtInfo.address"
							:icon-src="logoSrc"
							:size="140"
							class="!p-0" />
					</div>
				</div>
				<div class="mt-[24px] mb-2 pl-[10px] text-t-1 w-[316px] mx-auto mr-auto">
					{{ $t('recharge.address') }}
				</div>
				<div class="rounded-lg px-4 py-2 bg-bg-6 bg-[#1e2c37] text-t-6">
					{{ usdtInfo.address }}
				</div>
				<img
					class="block w-[55px] h-[24px] mt-8 mx-auto mb-0"
					src="@/assets/img/wallet/logo-wallet.png"
					alt="" />
			</div>
		</div>
		<div class="bg-[var(--color-bg-1)] pb-[29px] pt-[50px] px-[35px] overflow-hidden">
			<div
				class="flex justify-center items-center text-center w-[160px] h-[160px] overflow-hidden m-auto bg-t-1">
				<n-qr-code
					id="qr-code"
					:value="usdtInfo.address"
					:icon-src="logoSrc"
					:size="140"
					class="!p-0" />
			</div>
			<div class="mt-[11px] mb-[16px]" v-if="usdtInfo?.minAmount">
				<div class="flex justify-center items-center">
					{{ $t('recharge.lowestAmount') }}
					<base-currency src="USDT" alt="" />
					<up-amount hideCurrency :precision="2" :value="Number(usdtInfo.minAmount) + 2" />
				</div>
				<div class="flex justify-center items-center">
					{{ $t('recharge.maxAmount') }}
					=&nbsp;
					<base-currency src="USDT" alt="" />
					<up-amount hideCurrency :precision="2" :value="usdtInfo.maxAmount"></up-amount>
				</div>
				<div class="flex justify-center items-center" v-if="!isUSDTUser">
					<base-currency src="USDT" alt="" />
					1 &nbsp;≈ &nbsp;
					<up-amount
						:value="usdtInfo.rate"
						currencyClass="mr-0 w-[18px]  aspect-square flex justify-center items-center gap-2 bg-warning rounded-full aspect-square" />
				</div>
			</div>
			<div class="recharge-usdt__title">{{ $t('recharge.address') }}</div>
			<div class="bg-bg-3 my-3 px-3 py-2 rounded-[5px] flex justify-between items-center">
				<span>{{ usdtInfo.address }}</span>
				<base-copy :value="usdtInfo.address" />
			</div>
			<template v-if="exchanges.length">
				<div class="recharge-usdt__title">{{ $t('recharge.types') }}</div>

				<div class="bg-bg-3 py-2 rounded-[5px] flex my-2">
					<span
						class="flex flex-1 justify-center items-center"
						v-for="item in exchanges"
						:key="item.id"
						@click="openUrl(item.url)">
						<base-image class="w-[50px] aspect-square" :src="item.icon" type="server" />
					</span>
				</div>
			</template>

			<div class="tips">
				<wallet-course
					:tell-msg="usdtInfo.tellMsg"
					currency-type="crypto"
					:wallet-type="0"
					@loaded="courseLoaded" />
			</div>

			<div class="explain">
				<wallet-tip-desc :type-code="currentType"></wallet-tip-desc>
			</div>
			<base-button type="primary" block round style="margin-top: 28px" @click="toImage">
				{{ $t('recharge.saveQR') }}
			</base-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { NQrCode } from 'naive-ui'
import { useAppStore, useWalletStore } from '@/store'
import { UsdtNetwork } from '@/enums'
import { getDepositCryptoInfo } from '@/api/wallet'
import { showError, toImage } from '@/utils'
import WalletCourse from '@/views/wallet/components/wallet-course.vue'
import WalletTipDesc from '@/views/wallet/components/wallet-tip-desc.vue'
import logoSrc from '@/assets/img/wallet/usdt-qr.png'
import { UpAmount } from '@/components/up'
import { BaseButton, BaseCopy, BaseCurrency, BaseImage } from '@/components/base'

const appStore = useAppStore()
const walletStore = useWalletStore()
const currentType: any = computed(() => walletStore.depositData.currentType)
const isUSDTUser: any = computed(() => appStore.isUsdt)
const network = ref(UsdtNetwork.trx.id)
const usdtInfo: any = ref({})
const getNetworkInfo = async () => {
	// let loading
	try {
		// loading = showLoading()
		const { data } = await getDepositCryptoInfo({
			network: walletStore.depositData.cryptoCode,
			crypto: walletStore.depositData.cryptoType
		})
		// loading.close()
		usdtInfo.value = data
	} catch (error: any) {
		// loading.close()
		console.log('error ', error)
		showError(error)
	}
}

onMounted(() => {
	getNetworkInfo()
})

// 为配合混合开发，用window.open来打开
const openUrl = (url: any) => {
	window.open(url, '_blank')
}

watch(
	() => network.value,
	() => getNetworkInfo()
)

const exchanges: any = ref([])
const courseLoaded = (list: any) => {
	nextTick(() => {
		if (list) {
			exchanges.value = list
		}
	})
}
</script>
<style lang="scss" scoped></style>
